<template>
  <div>
  <el-select
    v-model="studentId"
    placeholder="选择需要报名的学生"


    clearable
    filterable
    default-first-option
    remote
    :remote-method="searchStudent"
    :loading="loadingSelect"
    @change="handleStudentChange"



  >
    <el-option
      v-for="item in studentOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>

  </div>
</template>
<script>
import {select as listStudentSelect} from '@/api/system/student'

export default {
  data() {
    return {
      loadingSelect: false,
      studentId: undefined,
      studentOptions: [],
      searchStudentParam: {

        // 查询具体值
        searchValue: '',

      }
    }
  },
  created() {
    this.searchStudent('')
  },
  methods: {
    // 查询学生
    searchStudent(query) {


      // 查询值变更时 重置页码
      if (this.searchStudentParam.searchValue !== query) {
        this.searchStudentParam.searchValue = query.trim()
        this.studentOptions = []

      }

      listStudentSelect({
        name: this.searchStudentParam.searchValue.trim(),
      }).then(response => {
          this.studentOptions = response.rows

      })
      // for (let key in this.studentOptions) {
      //     // 使用 obj[key] 获取属性的值
      //     console.log(key.name);
      // }
    },
    handleStudentChange(val) {
      this.$emit('change', val)
    }

  }
}
</script>
<style lang="scss">


</style>
